<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <title>NexMagic Scholar</title>
    <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../css/style.css?v=4.1.0" rel="stylesheet">
    <link href="../css/scholar/scholar.css" rel="stylesheet">
    <link href="../css/login.css" rel="stylesheet">
    <link href="../css/normalize.min.css" rel="stylesheet">
    <style>
        body {
            overflow: hidden;
            margin: 0;
            background-image: url("../img/search-bg.jpg");
        }
    </style>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/vue.min.js"></script>
    <script src="../js/img-speed.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="form" id="login-form" style="z-index: 2500">
    <!-- <ul class="tab-group">
         <li class="tab active"><a href="#signup">Sign Up</a></li>
         <li class="tab"><a href="#login">Log In</a></li>
     </ul>-->
    <div id="login-close" @click="closeLogin()"><i class="fa fa-times"></i></div>
    <div class="tab-content">
        <div id="login">
            <h1>NexMagic Scholar</h1>
            <div class="field-wrap">
                <label id="username-label">
                    Email Address<span class="req">*</span>
                </label>
                <input type="email" required autocomplete="off" v-model="username"/>
            </div>
            <div class="field-wrap">
                <label id="password-label">
                    Password<span class="req">*</span>
                </label>
                <input type="text" required autocomplete="off" v-model="password" id="password-input"/>
            </div>
            <!--<p class="forgot"><a href="#">Forgot Password?</a></p>-->
            <button id="loginbutton" class="button button-block" @click="login()">Login</button>
        </div>
        <div id="signup">
            <h1>Sign Up for Free</h1>
            <form action="/" method="post">
                &lt;!&ndash;<div class="top-row">
                <div class="field-wrap">
                    <label>
                        First Name<span class="req">*</span>
                    </label>
                    <input type="text" required autocomplete="off"/>
                </div>

                <div class="field-wrap">
                    <label>
                        Last Name<span class="req">*</span>
                    </label>
                    <input type="text" required autocomplete="off"/>
                </div>
            </div>&ndash;&gt;

                <div class="field-wrap">
                    <label>
                        Email Address<span class="req">*</span>
                    </label>
                    <input type="email" required autocomplete="off"/>
                </div>

                <div class="field-wrap">
                    <label>
                        Set A Password<span class="req">*</span>
                    </label>
                    <input type="password" required autocomplete="off"/>
                </div>

                <button type="submit" class="button button-block"/>
                Get Started</button>

            </form>
        </div>

    </div><!-- tab-content -->

</div>
<article style="width: 50%">
    <p class="imgSpeed" id="imgSpeed" style="width: 10%;height:0px;font-size: 0px;position: fixed;z-index: 2000;"></p>
</article>
<div id="zh_globe_container"></div> <!-- 容器 -->
<div class="form-group" id="box">
    <div class="login-i">
        <span @click="openLogin()"><i class="fa fa-user"></i><label id="username" class="username-label"></label></span>
    </div>
    <div class="search-title">
        NexMagic Scholar
    </div>
    <form class="search-input row" onkeydown="if(event.keyCode==13){return false;}">
        <div class="col-md-8">
            <input type="text" class="form-control" placeholder="TEXT HERE" id="keyword" @keydown="get($event)"/>
        </div>
        <div class="col-md-4 search-btn">
            <button type="button" class="btn-control" style="outline:0;" @click="search()" id="search-btn"><p>
                Search</p><i class="fa fa-arrow-right"></i></button>
        </div>
        <div class="hotWords">
            <!--Virology
            Psychiatry
            Nuclear medicine-->
            <p @click="search('Medicine')">Medicine</a></p>
            <p @click="search('Internal medicine')">Internal medicine</p>
            <p @click="search('Surgery')">Surgery</p>
            <p @click="search('Pathology')">Pathology</p>
            <p @click="search('Radiology')">Radiology</p>
            <p @click="search('Physical therapy')">Physical therapy</a></p>
            <p @click="search('Immunology')">Immunology</a></p>
            <p @click="search('Cardiology')">Cardiology</p>
            <p @click="search('Cancer research')">Cancer research</p>
            <p @click="search('Pharmacology')">Pharmacology</p>
        </div>
    </form>
</div>
<script src="../js/three/Detector.js"></script> <!-- webGL浏览器支持检测 -->
<script src="../js/three/three.min.js"></script> <!-- 核心js -->
<script src="../js/three/stats.min.js"></script> <!-- 性能测试 -->
<script src="../js/three/OrbitControls.js"></script> <!-- 地球控制 -->
<script src="../js/three/CanvasRenderer.js"></script> <!-- 文字标签 -->
<script src="../js/layer/layer.js"></script>
<script src="../js/gAjax.js"></script>
<script>
    var loginVue = new Vue({
        el: "#login-form",
        data: {
            submitFlag: false,
            username: "",
            password: ""
        },
        created: function () {
            var _this = this;
            //if (_this.submitFlag){

            if (!loginCheck_(false)) {
                setStorage("scholar-user-name", "");
                return;
            }

            var suser = getStorage("scholar-user-name");
            if (suser) {
                $("#username").html(suser.split("@")[0]);
            }

            // }
            /* var showLogin = getUrlParam("showLogin");
            if (showLogin == "1") {
            	if (loginCheck_()) {
                    return false;
                }
                $(".form-group").attr("style", "z-index: -1");
                $("#login-form").show();
            } */
        },
        methods: {
            login: function () {

                var _this = this;
                /* if (_this.submitFlag) return false;
                _this.submitFlag = true; */

                var un = _this.username;

                if (un == null || un == "") {
                    layer.msg('Your account is null!', {
                        skin: 'message-box-fail',
                        icon: 0,
                        area: 'auto',
                        maxWidth: '1000px',
                        offset: '20px',
                        anim: 0,
                        time: 1000
                    });
                    return;
                }

                var up = _this.password;

                if (up == null || up == "") {
                    layer.msg('Your password is null!', {
                        skin: 'message-box-fail',
                        icon: 0,
                        area: 'auto',
                        maxWidth: '1000px',
                        offset: '20px',
                        anim: 0,
                        time: 1000
                    });

                    return;
                }

                $("#loginbutton").css("background-color", "gray");
                $("#loginbutton").attr("disabled", true);
                $("#loginbutton").html("wait....");

                $.ajax({
                    url: gAjax.loginUrl + "validate",
                    data: {userName: _this.username, password: _this.password},
                    dataType: "json",
                    method: "post",
                    headers: {
                        "content-type": "application/x-www-form-urlencoded"
                    },
                    success: function (result) {
                        if (result && result.code == "10000") {
                            setLoginToken(result.data.token);
                            setStorage("scholar-user-name", _this.username);
                            $("#username").html(getStorage("scholar-user-name").split("@")[0]);
                            if (mainVue.keyword) {
                                window.location.href = "searchList.html?keyword=" + mainVue.keyword;
                            } else {
                                $("#loginbutton").css("background-color", "#4cb6bf");
                                $('#loginbutton').attr("disabled", false);
                                $("#loginbutton").html("login");
                                layer.msg('Login Successfully!', {
                                    skin: 'message-box-success',
                                    icon: 1,
                                    offset: '20px',
                                    anim: 0,
                                    time: 1000
                                });
                                _this.closeLogin();
                            }
                        } else {
                            $("#loginbutton").css("background-color", "#4cb6bf");
                            $('#loginbutton').attr("disabled", false);
                            $("#loginbutton").html("login");
                            layer.msg('Your account or password is not right or unactivated，please check your input again!', {
                                skin: 'message-box-fail',
                                icon: 0,
                                area: 'auto',
                                maxWidth: '1000px',
                                offset: '20px',
                                anim: 0,
                                time: 1000
                            });
                            //gAjax.errorCode(result.code);
                        }
                        /* _this.submitFlag = false; */
                    }
                });

            },
            closeLogin: function () {
                $(".form-group").attr("style", null);
                $("#login-form").hide();
            }
        },
        watch: {
            username: function (newVal, oldVal) {
                if (newVal == null || newVal.length == 0) {
                    $("#username-label").removeClass('active');
                } else {
                    $("#username-label").addClass('active');
                }
            },
            password: function (newVal, oldVal) {
                $("#password-input").attr("type", "password");
                if (newVal == null || newVal.length == 0) {
                    $("#password-label").removeClass('active');
                } else {
                    $("#password-label").addClass('active');
                }
            }
        }
    });
    var imgs = ['<img src="../img/earth/gongshi1.png"/>', '<img src="../img/earth/gongshi2.png"/>'];
    var neontext = new Neontext("imgSpeed", imgs);
    neontext.render.run();
    var mainVue = new Vue({
        el: '#box',
        data: {
            keyword: ""
        },
        methods: {
            get: function (ev) {
                if (ev.keyCode == 38 || ev.keyCode == 40) return;

                if (ev.keyCode == 13) {
                    this.search();
                }
                return false;
            },
            search: function (hotWord) {
                /*判断是否登录有token  && !getUrlParam("showLogin") */
				debugger;
                if (!loginCheck_(true)) {
                    this.keyword = hotWord;
                    return false;
                }

                var keyword = hotWord == undefined ? $("#keyword").val().trim() : hotWord;
                var keywordArr = keyword.split(" ");
                keyword = "";
                for (var i in keywordArr) {
                    keyword += keywordArr[i].substring(0, 1).toUpperCase() + keywordArr[i].substring(1) + (i == keywordArr.length ? '' : ' ');
                }
                keyword = keyword.trim();
                if (keyword != null && keyword.length > 0) {
                    $("#search-btn").focus();
                    /*
                     * 将查询关键词写入缓存
                     */

                    window.location.href = "searchList.html?keyword=" + keyword;

                } else {
                    $("#keyword").val("")
                    layer.msg('Please enter keywords!', {
                        skin: 'message-box-fail',
                        icon: 0,
                        area: 'auto',
                        maxWidth: '1000px',
                        offset: '20px',
                        anim: 0,
                        time: 1000
                    });
                }
            },
            openLogin: function () {

                if (loginCheck_(true)) {
                    return false;
                }

                mainVue.keyword = null;
                $("#loginbutton").css("background-color", "#4cb6bf");
                $('#loginbutton').attr("disabled", false);
                $("#loginbutton").html("login");

                /* $(".form-group").attr("style", "z-index: -1");
                $("#login-form").show(); */
            }
        }
    });

    var log = console.log.bind(console);

    var globeObj = (function () {
        'use strict';

        // 判断浏览器是否支持webgl
        if (!Detector.webgl) Detector.addGetWebGLMessage();

        var container, stats;
        var camera, scene, renderer;
        var group;
        var mouseX = 0, mouseY = 0;
        var winWth = window.innerWidth, winHgt = window.innerHeight;

        var localData = [{
            name: 'Experts',
            local: [89.45, 27.31],
            num: "110,367,514",
            color: "#ffb400"
        }, {
            name: 'Papers',
            local: [-47.55, -15.47],
            num: "166,192,182",
            color: '#ffb400'
        }, {
            name: 'Journals',
            local: [-75.42, 45.27],
            num: "45,278",
            color: '#9c5aff'
        }, {
            name: 'Conferences',
            local: [116.20, 39.55],
            num: "3,800",
            color: '#00f936'
        }, {
            name: 'Books',
            local: [-82.22, 23.08],
            num: "302,113",
            color: '#0090ff'
        }, {
            name: 'Patents',
            local: [-78.35, -0.15],
            num: "70,366,542",
            color: '#0090ff'
        }, {
            name: 'Institutions',
            local: [55.13, 49.37],
            num: "23,889",
            color: '#0090ff'
        }, {
            name: 'Fields',
            local: [31.02, -0.43],
            num: "216,155",
            color: '#ffb400'
        }];

        // 获取position
        function getPosition(lng, lat, alt) {
            var phi = (90 - lat) * (Math.PI / 180),
                theta = (lng + 180) * (Math.PI / 180),
                radius = alt + 120,
                x = -(radius * Math.sin(phi) * Math.cos(theta)),
                z = (radius * Math.sin(phi) * Math.sin(theta)),
                y = (radius * Math.cos(phi));
            return {x: x, y: y, z: z};
        }

        function createXYZText(text, position, num, color) {
            var spritey = makeTextSprite(text, {
                fontsize: 48,
                textColor: color
            }, num, color);
            spritey.position.copy(position);
            group.add(spritey);
        }

        /**
         * 创建永远面向相机的2D文字
         * */
        function makeTextSprite(message, parameters, num, textColor) {
            if (parameters === undefined) parameters = {};
            var fontface = parameters.hasOwnProperty("fontface") ? parameters["fontface"] : "Arial";
            var fontsize = parameters.hasOwnProperty("fontsize") ? parameters["fontsize"] : 18;
            var borderThickness = parameters.hasOwnProperty("borderThickness") ? parameters["borderThickness"] : 0;

            var canvas = document.createElement('canvas');
            canvas.width = 315;
            var context = canvas.getContext('2d');
            context.font = "normal " + fontsize + "px " + fontface;
            //var metrics = context.measureText(message);
            //var textWidth = metrics.width;
            context.lineWidth = borderThickness;
            context.fillStyle = "#fff";
            context.fillText(message, borderThickness, fontsize + borderThickness);
            context.fillText(num, borderThickness, fontsize + borderThickness + 45);

            var texture = new THREE.Texture(canvas);
            texture.needsUpdate = true;

            var spriteMaterial = new THREE.SpriteMaterial({map: texture, useScreenCoordinates: true});
            var sprite = new THREE.Sprite(spriteMaterial);
            sprite.scale.set(0.5 * fontsize, 0.25 * fontsize, 0.75 * fontsize);
            return sprite;
        }

        // 飞机
        function plane() {
            // 飞机标记
            var planeMarkers = {};

            // 飞机形状
            /*var planeShape = new THREE.Shape();
            planeShape.moveTo(0, 0);
            planeShape.lineTo(2, 0);
            planeShape.lineTo(2, -2);
            planeShape.lineTo(0, -2);
            planeShape.lineTo(0, 0);
            var planeGeometry = new THREE.ShapeGeometry(planeShape);
            */
            var sphereGeometry = new THREE.SphereGeometry(1, 20, 20);
            // 添加飞机
            for (var i in localData) {
                addPlane({
                    anum: i,
                    lng: localData[i].local[0],
                    lat: localData[i].local[1],
                    z: 0
                }, localData[i].name, localData[i].num, localData[i].color);
            }

            // 连接两坐标
            connect({source: 3, target: 0});
            connect({source: 3, target: 6});
            //connect({source: 1, target: 7});
            connect({source: 5, target: 1});
            connect({source: 5, target: 4});
            connect({source: 5, target: 2});
            connect({source: 7, target: 0});

            function addPlane(item, name, num, color) {
                if (item.anum && item.lng && item.lat) {
                    // 飞机材质
                    var planeMaterial = new THREE.MeshPhongMaterial({
                        color: color,
                        side: THREE.DoubleSide,
                        depthTest: true
                    });
                    var plane = new THREE.Mesh(sphereGeometry, planeMaterial);
                    // 旋转
                    plane.rotation.z = THREE.Math.degToRad(item.z);
                    // 定位
                    var position = getPosition(item.lng, item.lat, 3);
                    plane.position.set(position.x, position.y, position.z);
                    // 显示/隐藏
                    // plane.visible = false;
                    // 保存
                    planeMarkers[item.anum] = plane;
                    // 添加到场景
                    group.add(plane);
                    createXYZText("   " + name, getPosition(item.lng, item.lat, 6.5), "    " + num, color);
                }
            }

            function bezierCenter(max, min) {
                var length = max + min;
                return length / 2 + ((length >= 0 ? 10 : (-10)) * Math.abs(length / 100));
            }

            function connect(item) {
                var source = planeMarkers[item.source];
                var target = planeMarkers[item.target];
                // 飞线
                var geometry = new THREE.Geometry();//声明一个空几何体对象
                var curve = new THREE.QuadraticBezierCurve3(
                    new THREE.Vector3(source.position.x, source.position.y, source.position.z),
                    new THREE.Vector3(bezierCenter(target.position.x, source.position.x),
                        bezierCenter(target.position.y, source.position.y),
                        bezierCenter(target.position.z, source.position.z)),
                    new THREE.Vector3(target.position.x, target.position.y, target.position.z)
                );
                geometry.vertices = curve.getPoints(100);
                var material = new THREE.LineBasicMaterial({
                    color: 0x136867 //线条颜色
                });//材质对象
                var line = new THREE.Line(geometry, material);//线条模型对象
                group.add(line);//线条对象添加到场景中
            }
        }

        // 地球
        function globe() {
            var globeTextureLoader = new THREE.TextureLoader();
            globeTextureLoader.load('../img/earth/world-max4.png', function (texture) {
                var globeGeometry = new THREE.SphereGeometry(120, 120, 120);
                var globeMaterial = new THREE.MeshStandardMaterial({map: texture});
                var globeMesh = new THREE.Mesh(globeGeometry, globeMaterial);
                group.add(globeMesh);
                group.rotation.x = THREE.Math.degToRad(35);
                group.rotation.y = THREE.Math.degToRad(170);

                // 点光
                var pointColor = "#ffffff";
                var spotLight = new THREE.SpotLight(pointColor);
                spotLight.position.set(-40, 60, -10);
                spotLight.castShadow = true;
                spotLight.shadowCameraNear = 2;
                spotLight.shadowCameraFar = 200;
                spotLight.target = globeMesh;
                spotLight.distance = 0;
                spotLight.angle = 0.4;

                scene.add(spotLight);
            });
        }

        // 星点
        function stars() {
            var starsGeometry = new THREE.Geometry();
            for (var i = 0; i < 2000; i++) {
                var starVector = new THREE.Vector3(
                    THREE.Math.randFloatSpread(2000),
                    THREE.Math.randFloatSpread(2000),
                    THREE.Math.randFloatSpread(2000)
                );
                starsGeometry.vertices.push(starVector);
            }
            var starsMaterial = new THREE.PointsMaterial({color: 0x888888})
            var starsPoint = new THREE.Points(starsGeometry, starsMaterial);
            group.add(starsPoint);
        }

        // 光
        function lights() {
            // 平行光
            var hemisphereLight = new THREE.HemisphereLight(0xfdfdfd, 0x333333, 3);
            hemisphereLight.position.x = 0;
            hemisphereLight.position.y = 0;
            hemisphereLight.position.z = -200;
            group.add(hemisphereLight);

            // 环境光
            var ambientLight = new THREE.AmbientLight(0xffffff);
            group.add(ambientLight);
        }


        function myBrowser() {
            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
            var isOpera = userAgent.indexOf("Opera") > -1;
            if (isOpera) {
                return "Opera"
            }
            ; //判断是否Opera浏览器
            if (userAgent.indexOf("Firefox") > -1) {
                return "FF";
            } //判断是否Firefox浏览器
            if (userAgent.indexOf("Chrome") > -1) {
                return "Chrome";
            }
            if (userAgent.indexOf("Safari") > -1) {
                return "Safari";
            } //判断是否Safari浏览器
            if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
                return "IE";
            }
            ; //判断是否IE浏览器
        }

        function gyy(camera_) {
            var head = document.getElementsByTagName('head')[0];
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.onload = script.onreadystatechange = function () {
                if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
                    gy(camera_, scene);
                    script.onload = script.onreadystatechange = null;
                }
            };
            script.src = 'search1.js';
            head.appendChild(script);
        }

        // 初始化
        function init() {
            container = document.getElementById('zh_globe_container');

            scene = new THREE.Scene();
            /*var bgTexture = new THREE.TextureLoader().load("images/textures/search-bg.jpg");
            scene.background = bgTexture;*/

            camera = new THREE.PerspectiveCamera(100, winWth / winHgt, 1, 2000);
            camera.position.set(0, 0, 180);
            camera.lookAt(0, 0, 0);

            camera.aspect = window.innerWidth / window.innerHeight / 1.85;
            camera.updateProjectionMatrix();
            // debugger;
            // if(navigator.userAgent.indexOf("MSIE")>0) { // MSIE内核
            //     console.log("浏览器不支持光晕")
            // } else {
            //     debugger;
            //     document.write("<script src='search1.js'><\/script>");
            //     gy();
            // }

            var mb = myBrowser();
            if ("IE" == mb) {
                console.log("浏览器不支持光晕")
            }
            if ("FF" == mb) {
                gyy(camera);
            }
            if ("Chrome" == mb) {
                gyy(camera);
            }
            if ("Opera" == mb) {
                console.log("浏览器不支持光晕")
            }
            if ("Safari" == mb) {
                console.log("浏览器不支持光晕")
            }

            group = new THREE.Group();
            scene.add(group);

            // 地球
            globe();

            // 飞机
            plane();

            // 星点
            stars();

            // 半球光
            lights();

            // 渲染器
            renderer = new THREE.WebGLRenderer({
                antialias: true, //是否开启反锯齿
                preserveDrawingBuffer: true, //是否保存绘图缓冲
                alpha: true //是否可以设置背景色透明
            });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(winWth / 1.85, winHgt);
            renderer.setClearColor(0x000000, 0);//背景色，透明度
            container.appendChild(renderer.domElement);

            // 盘旋控制
            var orbitControl = new THREE.OrbitControls(camera, renderer.domElement);
            orbitControl.enableZoom = false; // 不可缩放
            orbitControl.enablePan = false; // 不可平移

            //orbitControl.maxPolarAngle = Math.PI / 2;

            // 性能测试
            //stats = new Stats();
            //container.appendChild(stats.dom);// fps帧数

            // resize事件
            window.addEventListener('resize', onWindowResize, false);
        }

        // 窗口大小改变
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight / 1.85;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth / 1.85, window.innerHeight);
        }

        // 渲染
        function render() {
            group.rotation.y += 0.0006;
            renderer.render(scene, camera);
        }

        // 动画
        function animate() {
            requestAnimationFrame(animate);
            render();
            //stats.update();
        }

        init();
        animate();
    })();
</script>
</body>
</html>